<template>
  <div>
    <el-form style="padding: 10px" :model="data.editData">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="字典编码">
            <el-input v-model="data.editData.dictCode" placeholder="字典编码" :disabled="data.unEdit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="字典名称">
            <el-input v-model="data.editData.dictName" placeholder="字典名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="数据来源">
            <yu-select
              select
              :disabled="data.unEdit"
              :options="data.dataSource"
              v-model:value="data.editData.isStatic"
              lab="name"
              val="code"
              @change="sourceChange(data.editData.isStatic)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="备注">
            <el-input v-model="data.editData.remark" placeholder="备注"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否树状" v-show="!data.static">
            <yu-select
              select
              :options="data.isTreeList"
              v-model:value="data.detail.isTree"
              lab="name"
              val="code"
              @change="changeDataType(data.detail.isTree)" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form v-show="!data.static">
      <el-row>
        <el-col :span="16">
          <el-form-item label="取值条件">
            <yu-ace-editor
              :data="data.detail.sqlField"
              lang="sql"
              wrap="true"
              fontSize="18"
              width="850px"
              height="300px"
              v-model:value="data.detail.sqlField"></yu-ace-editor>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20" :offset="20">
          <el-button type="primary" round @click="saveBtn">确定</el-button>
          <el-button type="success" round>重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <yu-table ref="yuTable" :tableData="data.tableData" :columns="data.tableData.columns" v-show="data.static">
      <template #toolbar>
        <el-button-group class="ml-4">
          <el-button @click="Add" class="iconfont yu-icon-tianjia">新增一行</el-button>
        </el-button-group>
      </template>
      <template #tool>
        <div class="tool">
          <el-button @click="saveBtn">保存</el-button>
        </div>
      </template>
      <template v-slot:handleSlot="{ scopeData }">
        <el-button-group class="ml-4">
          <el-button text type="success" size="small" @click="up(scopeData.row, scopeData.row.rowIndex - 1)">上移 </el-button>
          <el-button text type="success" size="small" @click="down(scopeData.row, scopeData.row.rowIndex - 1)">下移 </el-button>
          <el-button text size="small" type="danger" @click="delRow(scopeData.row, scopeData.row.rowIndex - 1)">删除 </el-button>
        </el-button-group>
      </template>
    </yu-table>
  </div>
</template>

<script setup>
  import { reactive, toRef, getCurrentInstance, onBeforeMount, onMounted, watch } from 'vue';
  const { proxy } = getCurrentInstance();
  const data = reactive({
    editData: { isStatic: '0' },
    isShow: false,
    tableData: { data: [], columns: [], tableArrts: {} },
    dataSource: [],
    static: true,
    detail: { sourceTable: '', sql: '', isTree: '0' },
    isTreeList: [],
    isTree: false,
    unEdit: false,
  });
  const props = defineProps({
    editData: { type: Object, defult: {} },
    isShow: { type: Boolean, defult: false },
  });
  const changeDataType = val => {
    if (data.detail.isTree == '0') {
    } else {
    }
  };
  watch(
    () => data.editData.isStatic,
    newValue => {
      if (data.editData.isStatic == '1') {
        data.static = false;
      } else {
        data.static = true;
      }
    },
    { immediate: true, deep: true }
  );

  watch(
    () => data.detail.isTree,
    newValue => {
      if (data.detail.isTree == '0') {
        data.isTree = false;
      } else {
        data.isTree = true;
      }
    },
    { immediate: true, deep: true }
  );
  onMounted(() => {
    //默认数据固定值
    // data.editData.isStatic = '0';
  });
  onBeforeMount(() => {
    dictItem();
  });
  data.tableData.columns = [
    { type: 'index' },
    // { type: 'selection' },
    { title: '有效值', key: 'itemCode', align: 'center', edit: true },
    { title: '显示名称', key: 'itemName', align: 'center', edit: true },
    {
      title: '操作',
      align: 'center',
      slot: 'handleSlot',
    },
  ];
  data.dataSource = [
    { code: '0', name: '固定值' },
    { code: '1', name: '表数据' },
  ];
  data.isTreeList = [
    { code: '0', name: '否' },
    { code: '1', name: '是' },
  ];
  const Add = () => {
    data.tableData.data.push({
      columName: '',
      columCode: '',
    });
  };
  data.editData = toRef(props, 'editData');
  const emits = defineEmits(['update:isShow']);

  const saveBtn = () => {
    let param = {
      sysDict: data.editData,
      sysDictItem: data.tableData.data,
      sysDictDetail: data.detail,
    };
    proxy.$api.data.saveSysDict(param).then(res => {
      if (res.code != -1) {
        proxy.$message({
          type: 'success',
          message: res.msg,
        });
        emits('update:isShow', false);
      } else {
        // 关闭对话框
        proxy.$message({
          type: 'error',
          message: res.msg,
        });
      }
    });
  };

  const dictItem = async () => {
    //先判断类型再加载数据
    if (data.editData.dictId != null) {
      data.unEdit = true;
      if (data.editData.isStatic == '0') {
        //静态
        data.static = true;
        proxy.$api.data.querySysDictItem(data.editData).then(res => {
          data.tableData.data = res;
        });
      } else {
        data.static = false;
        //动态
        proxy.$api.data.querySysDictDetail(data.editData).then(res => {
          console.log(res);

          data.detail = res;
        });
      }
    }
  };
  const up = (row, index) => {
    if (index > 0) {
      tableData.value.data.splice(index, 1);
      tableData.value.data.splice(index - 1, 0, row);
    }
  };
  const down = (row, index) => {
    if (index < tableData.value.data.length - 1) {
      tableData.value.data.splice(index, 1);
      tableData.value.data.splice(index + 1, 0, row);
    }
  };
  const delRow = (row, index) => {
    tableData.value.data.splice(index, 1);
  };
</script>

<style lang="scss" scoped></style>
